import { createRouter, createWebHistory } from 'vue-router'
import About from '@/pages/About.vue'
import App from '@/pages/App.vue'
import Blog from '@/pages/Blog.vue'
import ResetPwd from '@/pages/ResetPwd.vue'
import Creator from '@/pages/creator/Creator.vue'
import Home from '@/pages/home/Home.vue'
import MailNotice from '@/pages/mail-notice/MailNotice.vue'
import Message from '@/pages/message/Message.vue'
import Mine from '@/pages/mine/Mine.vue'
import PopularCreatorIndex from '@/pages/popular-creators/index.vue'
import Publish from '@/pages/publish/Publish.vue'
import Search from '@/pages/search/Search.vue'
import ShareMedia from '@/pages/share-media/ShareMedia.vue'
import PromoteCreator from '@/pages/signup/PromoteCreator.vue'
import SignUp2 from '@/pages/signup/SignUp2.vue'
import SignUp from '@/pages/signup/SignUp.vue'
import ThankYou from '@/pages/signup/ThankYou.vue'
import Tag from '@/pages/tag/Tag.vue'
import AppTest from '@/pages/test/AppTest.vue'
import Icon from '@/pages/test/Icon.vue'
import Test from '@/pages/test/Test.vue'
import { contains as containsLocale, locale } from '@/i18n'
import { TAB_NAMES as HOME_TAB_NAMES, TAB_TYPE as HOME_TAB_TYPE } from '@/constant/home'
import { TAB_NAMES as SEARCH_TAB_NAMES } from '@/constant/search'
import afterGuard from './guards/after'
import beforeGuard from './guards/before'
import { favoriteAuthCheck, redirectIfNotPrev } from './guards/before/lib'

/**
 * @property checkLogin 用於判斷該頁面是否需要驗證登入狀態
 */
const routes = [
  // 主 App
  {
    name: 'app',
    path: '/',
    component: App,
    children: [
      { path: '/', redirect: { name: 'home', params: { tab: HOME_TAB_NAMES[HOME_TAB_TYPE.FORYOU] } } },

      { name: 'home', path: `/:tab(${Object.values(HOME_TAB_NAMES).join('|')})`, redirect: toLang },
      { name: 'lang-home', path: `/:lang/:tab(${Object.values(HOME_TAB_NAMES).join('|')})`, component: Home, meta: { checkLogin: false } }, // prettier-ignore

      { name: 'search', path: `/:tab(${Object.values(SEARCH_TAB_NAMES).join('|')})/:prefer?`, redirect: toLang },
      {
        name: 'lang-search',
        path: `/:lang/:tab(${Object.values(SEARCH_TAB_NAMES).join('|')})/:prefer?`,
        component: Search,
        meta: { checkLogin: false },
        beforeEnter: favoriteAuthCheck,
      },

      { name: 'publish', path: '/publish', redirect: toLang },
      { name: 'lang-publish', path: '/:lang/publish', component: Publish, meta: { checkLogin: true } },

      { name: 'message', path: '/message', redirect: toLang },
      { name: 'lang-message', path: '/:lang/message', component: Message, meta: { checkLogin: true } },

      { name: 'mine', path: '/mine/:to(.*)?', redirect: toLang },
      {
        name: 'lang-mine',
        path: '/:lang/mine/:to(.*)?',
        component: Mine,
        meta: { checkLogin: false },
      },

      { name: 'popular-creators', path: '/creators', redirect: toLang },
      // prettier-ignore
      { name: 'lang-popular-creators', path: '/:lang/creators', component: PopularCreatorIndex, meta: { checkLogin: false } },

      { name: 'promote-creator', path: '/promote-creator', redirect: toLang },

      {
        name: 'lang-promote-creator',
        path: '/:lang/promote-creator',
        component: PromoteCreator,
        meta: { checkLogin: false },
        beforeEnter: (to, from, next) =>
          redirectIfNotPrev({
            from,
            next,
            prevName: 'thank-you',
            fallbackRoute: { name: 'home', params: { tab: HOME_TAB_NAMES[HOME_TAB_TYPE.FORYOU] } },
          }),
      },

      { name: 'creator', path: '/:username', redirect: toLang },
      { name: 'lang-creator', path: '/:lang/:username', component: Creator, meta: { checkLogin: false } },

      { name: 'category-tag', path: '/tag/:catename/:tagName', redirect: toLang },
      { name: 'lang-category-tag', path: '/:lang/tag/:catename/:tagName', component: Tag, meta: { checkLogin: false } },

      { name: 'tag', path: '/tag/:tagName', redirect: toLang },
      { name: 'lang-tag', path: '/:lang/tag/:tagName', component: Tag, meta: { checkLogin: false } },

      { name: 'reset-pwd', path: '/reset-password', redirect: toLang },
      { name: 'lang-reset-pwd', path: '/:lang/reset-password', component: ResetPwd, meta: { checkLogin: false } },

      { name: 'mail-notice', path: '/mail-notice', redirect: toLang },
      { name: 'lang-mail-notice', path: '/:lang/mail-notice', component: MailNotice, meta: { checkLogin: false } },

      { name: 'share-media', path: '/:username/:mediaType(video|photo)/:id(\\d+)', redirect: toLang },
      { name: 'lang-share-media', path: '/:lang/:username/:mediaType(video|photo)/:id(\\d+)', component: ShareMedia, meta: { checkLogin: false } }, // prettier-ignore
    ],
  },

  // 一般網頁
  { name: 'about', path: '/about', redirect: toLang },
  { name: 'lang-about', path: '/:lang/about', component: About, meta: { checkLogin: false } },

  { name: 'blog', path: '/blog/:id?', redirect: toLang },
  { name: 'lang-blog', path: '/:lang/blog/:id?', component: Blog, meta: { checkLogin: false } },

  { name: 'sign-up', path: '/:which(sign-up|creator-sign-up)', redirect: toLang },
  // prettier-ignore
  { name: 'lang-sign-up', path: '/:lang/:which(sign-up|creator-sign-up)', component: SignUp, meta: { checkLogin: false } },
  { name: 'sign-up2', path: '/:which(sign-up2|creator-sign-up2)', redirect: toLang },
  // prettier-ignore
  { name: 'lang-sign-up2', path: '/:lang/:which(sign-up2|creator-sign-up2)', component: SignUp2, meta: { checkLogin: false } },
  { name: 'thank-you', path: '/thank-you', redirect: toLang },
  {
    name: 'lang-thank-you',
    path: '/:lang/thank-you',
    component: ThankYou,
    meta: { checkLogin: false },
    beforeEnter: (to, from, next) =>
      redirectIfNotPrev({
        from,
        next,
        prevName: 'sign-up',
        fallbackRoute: { name: 'sign-up', params: { which: 'sign-up' } },
      }),
  },
]

// 開發測試用路由
const appTestRoutes = [
  { name: 'app-test', path: '/app-test', redirect: toLang },
  { name: 'app-lang-test', path: '/:lang/app-test', component: AppTest, meta: { checkLogin: false } },
]

const testRoutes = [
  { name: 'test', path: '/test', redirect: toLang },
  { name: 'lang-test', path: '/:lang/test', component: Test, meta: { checkLogin: false } },
  { name: 'icon', path: '/icon', redirect: toLang },
  { name: 'lang-icon', path: '/:lang/icon', component: Icon, meta: { checkLogin: false } },
]

if (import.meta.env.DEV) {
  routes.find((route) => route.name === 'app').children.push(...appTestRoutes)
  routes.push(...testRoutes)
}

const router = createRouter({
  history: createWebHistory(),
  routes,
})

beforeGuard.forEach((guard) => router.beforeEach(guard))
afterGuard.forEach((guard) => router.afterEach(guard))

router.onError((e) => {
  console.error(e.message)
})

function toLang(to) {
  // 如果 url 只輸入 lang (例如: https://fantasi.one/zh-tw)
  // 那應該會進到 creator 這個路由
  // 這時候我會把 :username 當成是 lang 然後要把他導回 home
  if (to.name === 'creator' && containsLocale(to.params.username)) {
    return { name: `lang-home`, params: { lang: to.params.username, tab: HOME_TAB_NAMES[HOME_TAB_TYPE.FORYOU] } }
  }

  return { name: `lang-${to.name}`, params: { ...to.params, lang: locale.value } }
}

export default router
